<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./font/iconfont.css">
  <style>
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      background: #f6f6f6;
    }
    p, h2 {
      margin: 0;
    }
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .container {
      max-width: 750px;
      margin: 0 auto;
    }
    
    header {
      height: 52px;
      display: flex;
      justify-content: space-between;
      align-items: center;  
      padding: 0 15px;
      border-bottom: 1px solid #e6e6e6;
    }
    
    header .logo {
      width: 56px;
      height: 26px;
      flex-shrink: 0;
    }

    .download {
      width: 137px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-right: 14px;
    }
    .download .load {
      font-size: 16px;
      color: #0084ff;
    }
    .line {
      height: 16px;
      width: 1px;
      background: #ebebeb;
    }

    .menu li{
      width: 19px;
      height: 3px;
      background: #8590a6;
      margin-bottom: 3px;
      border-radius: 2px;
    }
    .menu li:last-child {
      margin-bottom: 0;
    }

    article {
      padding: 17px 20px;
      background: #fff;
      margin-bottom: 10px;
      box-shadow: 0 3px 4px 0 #eee;
    }

    article h2 {
      font-size: 19px;
      font-weight: bold;
      margin-bottom: 12px;
    }
    article img {
      margin-bottom: 14px;
    }
    article p {
      font-size: 17px;
     
      margin-bottom: 10px;
    }
    
    .article-control {
      display: flex;
      align-items: center;
    }
    .agree, .oppose {
      font-size: 14px;
      color: #0084ff !important;
      background: #e5f2ff;
      padding: 0 13px;
      height: 32px;
      line-height: 32px;
      border-radius: 3px;
    }
    .oppose {
      transform: rotate(180deg);
    }
    .message, .star {
      color: #8590a6;
      font-size: 14px;
    }

    .article-control span {
      margin-right: 8px;
    }
    
  </style>
</head>
<body>
  <div class="container">
    <header>
      <div class="logo">
        <img src="./img/logo.png" width="100%" alt="">
      </div>
      <div class="download">
        <span class="load">下载App</span>
        <i class="line"></i>
        <ul class="menu">
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </header>

    <article>
      <h2>Surface Book 2 15寸的真是用户体验</h2>
      <img src="./img/pic.jpg" width="100%" alt="">
      <p>本文并非评测，只是本人使用Surface Book 2一月有余的简单新的 背景 本人坐标魔都，</p>
      <div class="article-control">
        <span class="agree"><i class="iconfont icon-jiantou"></i> 赞同 234</span>
        <span class="oppose"><i class="iconfont icon-jiantou other"></i></span>
        <span class="message"><i class="iconfont icon-xiaoxi_"></i> 评论 109</span>
        <span class="star"><i class="iconfont icon-xingxing"></i></span>
      </div>
    </article>
    <article>
      <h2>Surface Book 2 15寸的真是用户体验</h2>
      <p>本文并非评测，只是本人使用Surface Book 2一月有余的简单新的 背景 本人坐标魔都本文并非评测，只是本人使用Surface Book 2一月有余的简单新的 背景 本人坐标魔都，</p>
      <div class="article-control">
        <span class="agree"><i class="iconfont icon-jiantou"></i> 赞同 234</span>
        <span class="oppose"><i class="iconfont icon-jiantou other"></i></span>
        <span class="message"><i class="iconfont icon-xiaoxi_"></i> 评论 109</span>
        <span class="star"><i class="iconfont icon-xingxing"></i></span>
      </div>
    </article>
  </div>
</body>
</html>